<template>
  <el-card v-loading="loading" class="box-card box-card-list" style="margin-bottom: 20px;">
    <div class="companyData">
      <!-- <div class="logoWarp">
        <div v-if="bfData.logoInfo" class="lazyImg" style="padding:0;border: 1px solid #eee;">
          <img :src="bfData.logoInfo" style="width: 100%;">
        </div>
        <div v-else class="lazyImg">
          {{ bfData.dealName | filterText }}
        </div>
      </div> -->
      <div class="content" style="max-width: none;">
        <div class="header" style="margin-bottom: 10px;">
          <h1 class="name">
            {{ bfData.dealName == undefined ? '' : bfData.dealName }}
            <el-link type="primary" style="display: inline-block;margin-left: 5px;" :underline="false" @click="editForm">
              {{ $t('编辑信息') }}
            </el-link>
          </h1>
        </div>
        <el-row v-if="bfData.bfBase !== undefined" class="detail" :gutter="20">
          <el-col :span="8">
            <span class="label">{{ $t('项目负责人') }}：</span>
            <span class="link-hover-click" :title="bfData.personChargeName">{{ bfData.personChargeName == undefined ? '' : bfData.personChargeName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('预计投资时间') }}：</span>
            <span class="link-hover-click">{{ bfData.dateInvestmentEstimate == undefined ? '' : renderTime(bfData.dateInvestmentEstimate) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('预计投资金额') }}{{ $t('金额单位') }}：</span>
            <span class="link-hover-click">{{ bfData.amountInvestmentEstimate == undefined ? '' : moneyFormat(bfData.amountInvestmentEstimate, 'w') }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金认缴规模') }}{{ $t('金额单位') }}：</span>
            <span class="link-hover-click">{{ bfData.bfBase.subscribeScale == undefined ? '' : moneyFormat(bfData.bfBase.subscribeScale, 'w') }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金实缴规模') }}{{ $t('金额单位') }}：</span>
            <span class="link-hover-click">{{ bfData.bfBase.paidInScale == undefined ? '' : moneyFormat(bfData.bfBase.paidInScale, 'w') }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金投资类型') }}：</span>
            <span class="link-hover-click">{{ bfData.bfBase.investType == undefined ? '' : investTypeFormat(bfData.bfBase.investType) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金类型') }}：</span>
            <span class="link-hover-click">{{ bfData.bfBase.fundType == undefined ? '' : fundTypeFormat(bfData.bfBase.fundType) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金阶段') }}：</span>
            <span class="link-hover-click">{{ bfData.bfBase.fundStage == undefined ? '' : fundStageFormat(bfData.bfBase.fundStage) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金成立日') }}：</span>
            <span class="link-hover-click">{{ bfData.bfBase.fundSetTime == undefined ? '' : renderTime(bfData.bfBase.fundSetTime) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('管理公司') }}：</span>
            <span class="link-hover-click" :title="bfData.bfBase.manageCompanyName">{{ bfData.bfBase.manageCompanyName == undefined ? '' : bfData.bfBase.manageCompanyName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('管理公司认缴比例') }}(%)：</span>
            <span class="link-hover-click" :title="bfData.bfBase.manageSubscribeRatio">{{ bfData.bfBase.manageSubscribeRatio == undefined ? '' : bfData.bfBase.manageSubscribeRatio }}</span>
          </el-col>
          <el-col :span="24">
            <span class="label">{{ $t('项目简介') }}：</span>
            <span class="link-hover-click" :title="bfData.dealIntroduction">{{ bfData.dealIntroduction == undefined ? '' : bfData.dealIntroduction }}</span>
          </el-col>
        </el-row>
        <el-divider v-if="strategyData" content-position="left">{{ $t('投资策略') }}</el-divider>
        <el-row v-if="strategyData" class="detail" :gutter="20">
          <el-col :span="24" style="align-items: center;">
            <span class="label">{{ $t('投资阶段') }}：</span>
            <span class="link-hover-click">
              <span v-for="(item, index) in stageList" :key="index" style="margin-right: 5px;">
                <el-tag v-if="index === 0" type="success" size="small">{{ item }}</el-tag>
                <el-tag v-if="index === 1" type="info" size="small">{{ item }}</el-tag>
                <el-tag v-if="index === 2" type="warning" size="small">{{ item }}</el-tag>
                <el-tag v-if="index === 3" type="danger" size="small">{{ item }}</el-tag>
                <el-tag v-if="index === 4" size="small">{{ item }}</el-tag>
              </span>
            </span>
          </el-col>
          <el-col :span="24" style="align-items: center;">
            <span class="label">{{ $t('投资行业') }}：</span>
            <span class="link-hover-click">
              <span v-for="(item, index) in industryList" :key="index" style="margin-right: 5px;">
                <el-tag v-if="index === 0" type="success" size="small" effect="plain">{{ item }}</el-tag>
                <el-tag v-if="index === 1" type="info" size="small" effect="plain">{{ item }}</el-tag>
                <el-tag v-if="index === 2" type="warning" size="small" effect="plain">{{ item }}</el-tag>
                <el-tag v-if="index === 3" type="danger" size="small" effect="plain">{{ item }}</el-tag>
                <el-tag v-if="index === 4" size="small" effect="plain">{{ item }}</el-tag>
              </span>
            </span>
          </el-col>
          <el-col :span="24">
            <span class="label">{{ $t('投资理念') }}：</span>
            <span class="link-hover-click">{{ strategyData.investIdea === undefined ? '' : strategyData.investIdea }}</span>
          </el-col>
          <el-col :span="24">
            <span class="label">{{ $t('投资地域') }}：</span>
            <span class="link-hover-click">{{ strategyData.investArea === undefined ? '' : strategyData.investArea }}</span>
          </el-col>
          <el-col :span="24">
            <span class="label">{{ $t('策略依据') }}：</span>
            <span class="link-hover-click">{{ strategyData.strategyBasis === undefined ? '' : strategyData.strategyBasis }}</span>
          </el-col>
          <el-col :span="24">
            <span class="label">{{ $t('风控手段') }}：</span>
            <span class="link-hover-click">{{ strategyData.riskControl === undefined ? '' : strategyData.riskControl }}</span>
          </el-col>
          <el-col :span="24" class="mb0">
            <span class="label">{{ $t('退出策略') }}：</span>
            <span class="link-hover-click">{{ strategyData.exitStrategy === undefined ? '' : strategyData.exitStrategy }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 添加或修改项目基本信息对话框 -->
    <el-dialog :title="$t('项目基本信息')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealBaseForm ref="dealBaseForm" />
    </el-dialog>
  </el-card>
</template>
<script>

import { getDealBase } from '@/api/base/deal/dealBase'
import dealBaseForm from '@/views/deal/base/dealBaseForm.vue'
import { getInvestStrategyByDealId } from '@/api/bf/strategy/bfInvestStrategy'
export default {
  components: {
    dealBaseForm
  },
  filters: {
    filterText: function(value) {
        var patrn = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi
        if (!patrn.exec(value) && value && value.length > 0) {
          value = value.substring(0, 1)
        } else if (value && value.length < 2 && value.length > 0) {
          value = value.substring(0, 1)
        } else if (value && value.length <= 4 && value.length >= 2) {
          value = value.substring(0, 2)
        } else if (value && value.length > 4) {
          value = value.substring(0, 4)
        }
        return value
    }
  },
  data() {
    return {
      bfData: {},
      // 基金投资类型字典
      investTypeOptions: undefined,
      // 基金类型字典
      fundTypeOptions: undefined,
      // 基金阶段字典
      fundStageOptions: undefined,
      loading: false,
      formOpen: false,
      strategyData: {},
      investStageOptions: [],
      investIndustryOptions: [],
      stageList: [],
      industryList: []
    }
  },
  created() {
    // 基金投资类型字典
    this.getDicts('fund_invest_type').then(response => {
      this.investTypeOptions = response.data
    })
    // 基金类型字典
    this.getDicts('fund_type').then(response => {
      this.fundTypeOptions = response.data
    })
    // 基金阶段字典
    this.getDicts('fund_phase').then(response => {
      this.fundStageOptions = response.data
    })
    this.getDicts('fund_investment_stage').then(response => {
      this.investStageOptions = response.data
    })
    this.getDicts('deal_industry_focus').then(response => {
      this.investIndustryOptions = response.data
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化数据
    init() {
      this.loading = true
      getDealBase(this.$route.query.id).then(response => {
        this.bfData = response.data
        this.loading = false
      })
      getInvestStrategyByDealId(this.$route.query.id).then(response => {
        this.strategyData = response.data
        if (this.strategyData?.investStage) {
          this.stageFormat(this.strategyData.investStage)
        }
        if (this.strategyData?.investIndustry) {
          this.industryFormat(this.strategyData.investIndustry)
        }
      })
    },
    // 投资阶段
    stageFormat(val) {
      var str = this.selectDictLabels(this.investStageOptions, val)
      this.stageList = str.split(',')
    },
    // 投资行业
    industryFormat(val) {
      var str = this.selectDictLabels(this.investIndustryOptions, val)
      this.industryList = str.split(',')
    },
    renderTime(date) {
      var dateTemp = new Date(date).toJSON()
      return new Date(+new Date(dateTemp) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').substr(0, 10)
    },
    // 基金投资类型字典翻译
    investTypeFormat(value) {
      return this.selectDictLabel(this.investTypeOptions, value)
    },
    // 基金类型字典翻译
    fundTypeFormat(value) {
      return this.selectDictLabel(this.fundTypeOptions, value)
    },
    // 基金阶段字典翻译
    fundStageFormat(value) {
      return this.selectDictLabel(this.fundStageOptions, value)
    },
    editForm() {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.dealBaseForm.openLocation = 'bfBase'
        this.$refs.dealBaseForm.init(this.$route.query)
      })
    }

  }
}
</script>
<style lang="scss" scoped>
  .custom{
    background-color: #f6f7fb !important;
  }
</style>
